🆒 5 трюков Jetpack Compose

1️⃣ Используйте rememberUpdatedState, чтобы избежать устаревших лямбд

Если вы передаете в Composable лямбду, которая может измениться, rememberUpdatedState гарантирует, что вы используете последнюю версию.

val updatedOnClick by rememberUpdatedState(newValue = onClick)
LaunchedEffect(Unit) {
    delay(1000)
    updatedOnClick()
}

Без этого Compose может вызвать старую версию лямбды, что приведет к ошибкам.

2️⃣ Не забывайте о pointerInput для кастомных жестов

Выйдете за пределы clickable — используйте перетаскивание, мультитач или собственное распознавание сложных жестов.

Modifier.pointerInput(Unit) {
    detectTapGestures(
        onLongPress = { /* do something */ }
    )
}

Можно также обнаружить масштабирование с помощью щипков, смахивание или реализовать распознавание кастомных жестов.

3️⃣ Прокручивайте любой компонент с помощью Modifier.scrollable

Хотите прокрутить бокс или кастомный макет? Вам не нужно использовать LazyColumn или Column.

val scrollState = rememberScrollState()
Box(
    Modifier
        .height(200.dp)
        .verticalScroll(scrollState)
) {
    // Large content goes here
}

Также работает с горизонтальными прокрутками или вложенными скролами с помощью NestedScrollConnection.

4️⃣ Используйте CompositionLocal для тематического поведения

Вместо глубокой передачи параметров используйте CompositionLocal для обмена такими значениями, как интервал или предпочтения пользователя.

val LocalSpacing = compositionLocalOf { 0.dp }
CompositionLocalProvider(LocalSpacing provides 8.dp) {
    MyComposable()
}
@Composable
fun MyComposable() {
    val spacing = LocalSpacing.current
    Spacer(modifier = Modifier.height(spacing))
}

Идеально подходит для согласования таких элементов дизайна, как интервалы, цвета или размеры шрифтов в больших кодовых базах.

5️⃣ Используйте Modifier.graphicsLayer для создания эффектов

graphicsLayer предоставляет вам низкоуровневый контроль для применения таких эффектов, как вращение, масштабирование или альфа-канал, прямо на GPU.

Modifier.graphicsLayer {
    rotationZ = 15f
    scaleX = 1.2f
    alpha = 0.8f
}

Используйте с осторожностью: эти эффекты хорошо работают на графических процессорах, но проверяйте производительность на устройствах более низкого класса.

Делитесь в комментариях лайфхаками, которыми вы пользуетесь 💬

🐸 Библиотека мобильного разработчика

#буст